<template>
  <view v-if="show" mode="bottom" @close="close" @open="open" class="popup-box">
    <view class="popup-box__wrapper">
      <view class="popup-box__wrapper-close">
        <u-icon name="close-circle" color="#fff" size="49rpx" @click="close"></u-icon>
      </view>
      <view class="popup-box__wrapper-body flex-center">
        <image
          src="../static/logo.png"
          class="logo"
          width="130rpx"
          height="130rpx"
          radius="20rpx"
        ></image>
        <view class="popup-box__wrapper-info">
          <view class="popup-box__wrapper-info-title">Download App</view>
          <view class="popup-box__wrapper-info-desc"
            >downloading apps makes watching dramas more convenient</view
          >
        </view>
        <view class="popup-box__wrapper-btn view-center" @click="downloadHandler">Go</view>
      </view>
    </view>
  </view>
</template>
<script>
	import { downloadGoogle } from '../env.js'
export default {
  data() {
    return { show: true }
  },
  methods: {
    open() {
      this.show = true
      // console.log('open');
    },
    close() {
      this.show = false
      // console.log('close');
    },
		downloadHandler(){
			window.location.href = downloadGoogle||'https://btshort.com/short/video/app/btshort.apk'
		}
  }
}
</script>
<style lang="scss" scoped>
.popup-box {
  // width: 356px;
  margin: 0 auto;
  position: fixed;
  bottom: 120rpx;
  left: 0px;
  right: 0px;
  z-index: 9999;
  /deep/.u-popup__content {
    background-color: transparent;
  }
  &__wrapper {
    padding: 0 30rpx ;
    &-close {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12rpx;
    }
    &-body {
      width: 690rpx;
      height: 174rpx;
      background: #eeebff;
      border-radius: 20rpx;
      padding: 20rpx 19rpx;
      .logo {
        // width="130rpx" height="130rpx" radius="20rpx"
        width: 130rpx;
        height: 130rpx;
        border-radius: 20rpx;
      }
    }
    &-info {
      margin-left: 17rpx;
      width: 350rpx;
      &-title {
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 36rpx;
        color: #28226c;
      }
      &-desc {
        // margin-top: 20rpx;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 24rpx;
        color: #6e63a2;
      }
    }
    &-btn {
      width: 139rpx;
      height: 58rpx;
      background: $color-primary;
      border-radius: 29rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 30rpx;
      color: #ffffff;
      margin-left: auto;
    }
  }
}
</style>
